<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    
    <!-- 首屏加载动画样式 -->
    <style>
      /* 加载动画容器：全屏覆盖，居中显示 */
      #splash-loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.6s ease-out; /* 与JS中600ms保持一致 */
      }
      
      /* 加载动画元素：旋转的圆环 */
      .splash-loader {
        width: 60px;
        height: 60px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3b82f6;
        border-radius: 50%;
        animation: splash-spin 1s linear infinite;
      }
      
      /* 加载文字 */
      .splash-loading-text {
        margin-top: 20px;
        color: #3b82f6;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 1px;
      }
      
      /* 旋转动画定义 */
      @keyframes splash-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      /* 加载完成后隐藏动画 */
      .splash-loading-fadeout {
        opacity: 0;
      }
      
      /* 响应式调整 */
      @media (max-width: 480px) {
        .splash-loader {
          width: 50px;
          height: 50px;
        }
        
        .splash-loading-text {
          font-size: 14px;
        }
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <!-- 首屏加载动画 DOM -->
    <div id="splash-loading-container">
      <div class="splash-loader"></div>
      <div class="splash-loading-text"><%= htmlWebpackPlugin.options.title %> 加载中...</div>
    </div>
    
    <!-- Vue 挂载容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
    
    <!-- 加载完成后移除动画的脚本 -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const app = document.getElementById('app');
        if (app) {
          // 监听app容器的子元素变化，判断Vue是否挂载完成
          const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
              // 当app内有子元素被添加时，说明Vue已渲染
              if (mutation.addedNodes.length) {
                observer.disconnect(); // 停止观察
                // 200ms缓冲后执行隐藏动画
                setTimeout(() => {
                  const loadingContainer = document.getElementById('splash-loading-container');
                  if (loadingContainer) {
                    loadingContainer.classList.add('splash-loading-fadeout');
                    // 600ms后移除DOM（与CSS transition时长一致）
                    setTimeout(() => loadingContainer.remove(), 600);
                  }
                }, 200);
              }
            });
          });
          // 仅观察直接子元素变化（性能更优）
          observer.observe(app, { childList: true });
        } else {
          // 兼容处理：如果app元素不存在，3秒后强制移除
          setTimeout(() => {
            const loadingContainer = document.getElementById('splash-loading-container');
            loadingContainer && loadingContainer.remove();
          }, 3000);
        }
      });
    </script>
  </body>
</html>
    